<!DOCTYPE html>
<!--

// Copyright 2011 Traceur Authors.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

-->
<html>
<head>
<title>Traceur</title>
<script>
if (location.host === 'traceur-compiler.googlecode.com') {
  location.replace('https://google.github.io/traceur-compiler/demo/repl.html' +
      location.hash);
}
</script>

<!-- css and js files for CodeMirror from http://codemirror.net/demo/sublime.html -->

<link rel="stylesheet" href="../third_party/CodeMirror-4.0.3/lib/codemirror.css">
<link rel="stylesheet" href="../third_party/CodeMirror-4.0.3/addon/fold/foldgutter.css">
<link rel="stylesheet" href="../third_party/CodeMirror-4.0.3/addon/dialog/dialog.css">

<script src="../third_party/CodeMirror-4.0.3/lib/codemirror.js"></script>
<script src="../third_party/CodeMirror-4.0.3/addon/search/searchcursor.js"></script>
<script src="../third_party/CodeMirror-4.0.3/addon/search/search.js"></script>
<script src="../third_party/CodeMirror-4.0.3/addon/dialog/dialog.js"></script>
<script src="../third_party/CodeMirror-4.0.3/addon/edit/matchbrackets.js"></script>
<script src="../third_party/CodeMirror-4.0.3/addon/edit/closebrackets.js"></script>
<script src="../third_party/CodeMirror-4.0.3/addon/comment/comment.js"></script>
<script src="../third_party/CodeMirror-4.0.3/addon/wrap/hardwrap.js"></script>
<script src="../third_party/CodeMirror-4.0.3/addon/fold/foldcode.js"></script>
<script src="../third_party/CodeMirror-4.0.3/addon/fold/brace-fold.js"></script>
<script src="../third_party/CodeMirror-4.0.3/mode/javascript/javascript.js"></script>
<script src="../third_party/CodeMirror-4.0.3/keymap/sublime.js"></script>

<script src="../bin/BrowserSystem.js"></script>

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Droid+Sans+Mono|Droid+Sans">

<style>

html, body {
  margin: 0;
  font-family: 'Lucida Grande', sans-serif;
}

* {
  box-sizing: border-box;
}

.CodeMirror {
  border: 1px solid #ddd;
  height: auto;
  width: -webkit-calc(50% - 15px);
  width: calc(50% - 15px);
  font-family:  'Droid Sans Mono', monospace;
  font-size: 12px;
  margin: 5px;
  line-height: 1.2;
}

.CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
  min-height: 300px;
}

.output-wrapper {
  overflow: hidden;
}

html.hide-output .output-wrapper {
  display: none;
}

html.hide-output .CodeMirror {
  width: -webkit-calc(100% - 20px);
  width: calc(100% - 20px);
}

h1 {
  margin: 5px;
}

.error {
  color: red;
}

.error, .source-map {
  margin: 10px;
  flex: 1;
  overflow: scroll;
}

.options-area {
  position: relative;
  height: 25px;
}

.repl-button {
  background: black;
  border-radius: 5px;
  border: 0;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
  color: white;
  display: inline-block;
  font: 13px/20px 'Droid Sans', sans-serif;
  margin: 0;
  padding: 4px 10px;
  position: relative;
  text-decoration: none;
}

.menu-container {
  position: relative;
}

.options {
  background: black;
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  color: white;
  font: 13px/20px 'Droid Sans', sans-serif;
  margin-top: -5px;
  padding: 10px;
  position: absolute;
  right: 0;
  width: 32ex;
  z-index: 10;
}

.options label {
  display: block;
}

.options label > input {
  vertical-align: -2px;
  margin: 0 1ex 0 0;
}

.options hr {
  background: white;
  border: 0;
  height: 1px;
}

.god0 {
  color: red;
  -webkit-transition:color 1s ease-in-out;
  transition: color 1s ease-in-out;
}

.god1 {
  color: yellow;
  -webkit-transition: color 1s ease-in-out;
  transition: color 1s ease-in-out
}

.vbox {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hbox {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: space-around;
  width: 100%;
}

.stretch {
  flex: 2;
}

.hbox.center {
  align-items: center;
}

.sourceMapRange {
  background-color: rgba(192, 192, 192, 0.43);
}

</style>
</head>
<body>

<div class='hbox center'>
  <a class="repl-button" href="http://github.com/google/traceur-compiler" target="_blank">Source</a>
  <h1>Traceur Transcoding Demo</h1>
  <div class="menu-container">
    <button class="repl-button option-button">Options</button>
    <div class="options" hidden>
      <label><input class="eval" type="checkbox" checked>Evaluate</label>
      <label><input class="output" type="checkbox" checked>Show generated code</label>
      <label><input class="show-all-toggle" type="checkbox">Show all options</label>
      <hr>
      <div class="traceur-options"></div>
      <button class="reset-all">Reset All Options</button>
      <button class="all-off">All Options Off</button>
    </div>
  </div>
</div>

<div class='hbox'>
  <textarea class="input" hidden></textarea>
  <textarea class="output" hidden></textarea>
</div>

<div class='hbox'>
  <pre class="error"></pre>
  <pre class="source-map"></pre>
</div>
<div id='mocha'></div>
<script>
System.import('./repl-module.js').catch(function(ex) {
  console.error('Internal Error ', ex.stack || ex);
});
</script>
</body>
</html>
